/*广告图片数组*/
var imgs = [
    { "i": 0, "img": "uploadfile/ShowImg/dc6b3ff175bb48eab97ba79d871b507e.jpg", "intro": "第一机关党委换届选举党员大会" },
    { "i": 1, "img": "uploadfile/ShowImg/2a4fbe5fb587486185f11c219962d03f.jpg", "intro": "第二机关党委换届选举党员大会" }
];
//var imgs = [];
$(function () {
    //getShowData("视频展示");
    //$(".line span").click(function() {
    //    alert($("#nav a").index($(this)));
    //});
});

function openDetial(type, id) {
    window.open("Detail.aspx?lx=" + type + "&art_id=" + id);
}



function changeImg(obj, i) {
    var index = $(".line span").index(obj);
    slider.canAuto = false;
    var arr = [];
    var arrOrder = imgs.sort(
                function (a, b) {
                    return (a.i - b.i);
                }
            );
    var p = 0;
    for (var j = 0; j <= arrOrder.length-1; j++) {
        if (arrOrder[j].i >= index) {
            arr.push(arrOrder[j]);
            p++;
        }
    }
    for (var k = 0; k < arrOrder.length - p; k++) {
        if (arrOrder[k].i <= k) {
            arr.push(arrOrder[k]);
        }
    }
    imgs = arr;
    slider.updateView();
    //$(".line span").addClass("active").siblings(".active").removeClass("active");
    //$(obj).addClass("active").siblings(".active").removeClass("active");
    $(obj).addClass("active").siblings(".active").removeClass("active");
    setTimeout(function () {
        slider.canAuto = true;
    }, 3000);
}

function changevidioImg(obj, i) {
    var index = $(".lines span").index(obj);
    vSlider.canAuto = false;
    var arr = [];
    var arrOrder = arrs.sort(
                function (a, b) {
                    return (a.i - b.i);
                }
            );
    var p = 0;
    for (var j = 0; j <= arrOrder.length - 1; j++) {
        if (arrOrder[j].i >= index) {
            arr.push(arrOrder[j]);
            p++;
        }
    }
    for (var k = 0; k < arrOrder.length - p; k++) {
        if (arrOrder[k].i <= k) {
            arr.push(arrOrder[k]);
        }
    }
    arrs = arr;
    vSlider.updateView();
    //$(".line span").addClass("active").siblings(".active").removeClass("active");
    $(obj).addClass("active").siblings(".active").removeClass("active");
    setTimeout(function () {
        vSlider.canAuto = true;
    }, 3000);
}

function getShowData(datatype) {
    var arr = [];
    $.ajax({
        type: "POST",
        async: false,
        contentType: "application/json; charset=utf-8",
        data: "",
        url: "AjaxProcess/GetShowImgHandler.ashx?type=" + encodeURI(datatype),
        dataType: 'json',
        success: function (data) {
            arr = data;
        },
        error: function (message) {
            alert(message.responseText);
        }
    });
    return arr;
}
/********轮播******/
var slider = {
    LIWIDTH: 0,
    DURATION: 10,
    WAIT: 3000,//自动轮播之间的等待时间
    timer: null,//保存一次性定时器动画
    canAuto: true,//保存是否可以自动轮播
    init: function () {
        imgs = getShowData("图片新闻");
        //获得容器框的宽度，赋值给LIWIDTH
        this.LIWIDTH = parseFloat($(".meeting").css("width"));
        this.updateView();
        $(".line").on("mouseover", "span:not('.active')", function (e) {//里面this指指定的当前元素
            var $target = $(e.target);
            this.move($target.html() - $target.siblings(".active").html());
        }.bind(this));
        $(".meeting").hover(
            function () {
                this.canAuto = false;
            }.bind(this),
            function () {
                this.canAuto = true;
            }.bind(this)
        );
        this.autoMove();
    },
    autoMove: function () {//启动自动轮播
        //启动一次性定时器
        this.timer = setTimeout(function () {
            if (this.canAuto) {
                this.move(1);
            } else {
                this.autoMove();
            }
        }.bind(this), this.WAIT);
    },
    move: function (n) {
        //var left=parseFloat($("#imgs").css("left"));//获得#imgs当前的left,转为浮点数
        clearTimeout(this.timer);
        this.timer = null;
        $("#imgs").stop(true);//停止动画，防止叠加
        if (n < 0) {
            n *= -1;//此时n为正数
            imgs = imgs.splice(imgs.length - n, n).concat(imgs);
            this.updateView();
            $("#imgs").css("left", -n * this.LIWIDTH);
            $("#imgs").animate({ left: "0" }, this.DURATION, this.autoMove.bind(this, 1));
        } else {
            $("#imgs").animate({ left: -n * this.LIWIDTH }, this.DURATION, this.endMove.bind(this, n));
        }
    },
    endMove: function (n) {//左移结束
        var v = imgs.splice(0, n);
        imgs = imgs.concat(v);
        this.updateView();
        $("#imgs").css("left", 0);
        this.autoMove();
    },
    updateView: function () {//将数组中的元素更新到页面
        for (var i = 0, html = '', idxs = ''; i < imgs.length; i++) {
            html += "<li aa='" + imgs[i].img + "' bb=" + imgs[i].i + "><img style='cursor:pointer' src='" + imgs[i].img + "' onclick='openDetial(\"图片新闻\",\"" + imgs[i].Id + "\");'></li>";
            //idxs += "<span></span>";
            idxs += "<span style='cursor:pointer;width:10px;height:10px;' onclick='changeImg(this,\"" + imgs[i].i + "\");'></span>";
        }
        $(".meeting ul").html(html)
            .css("width", this.LIWIDTH * imgs.length);
        $(".line").html(idxs);

        if (imgs.length > 0) {
            $(".line>span:eq(" + imgs[0].i + ")").addClass("active")
                .siblings(".active").removeClass("active");
            intro = imgs[0].intro;
            $('.banner-intro>p').html(intro);
        }
        
        //$(".line span").click(function () {
        //    alert($(this).parent().html());
        //    imgs = imgs.concat(imgs.splice(0, 1));
        //    this.updateView();
        //});

    }
};
slider.init();


/*视频图片数组*/
var arrs = [
    { "i": 0, "img": "uploadfile/ShowImg/d4e9ae4b5f874c5db8b60e5fd4e0a9fd.jpg" },
    { "i": 1, "img": "uploadfile/ShowImg/d4e9ae4b5f874c5db8b60e5fd4e0a9fd.jpg" }
];
//var arrs = [];
/********轮播******/
var vSlider = {
    LIWIDTH: 0,
    DURATION: 10,
    WAIT: 3000,//自动轮播之间的等待时间
    timer: null,//保存一次性定时器动画
    canAuto: true,//保存是否可以自动轮播
    init: function () {
        arrs = getShowData("视频展示");
        //获得容器框的宽度，赋值给LIWIDTH
        this.LIWIDTH = parseFloat($(".play").css("width"));
        this.updateView();
        $(".lines").on("mouseover", "span:not('.active')", function (e) {//里面this指指定的当前元素
            var $target = $(e.target);
            this.move($target.html() - $target.siblings(".active").html());
        }.bind(this));
        $(".play").hover(
            function () {
                this.canAuto = false;
            }.bind(this),
            function () {
                this.canAuto = true;
            }.bind(this)
        );

        this.autoMove();
    },
    autoMove: function () {//启动自动轮播
        //启动一次性定时器
        this.timer = setTimeout(function () {
            if (this.canAuto) {
                this.move(1);
            } else {
                this.autoMove();
            }
        }.bind(this), this.WAIT);
    },
    move: function (n) {
        //var left=parseFloat($("#imgs").css("left"));//获得#imgs当前的left,转为浮点数
        clearTimeout(this.timer);
        this.timer = null;
        $("#vedio").stop(true);//停止动画，防止叠加
        if (n < 0) {
            n *= -1;//此时n为正数
            imgs = imgs.splice(imgs.length - n, n).concat(imgs);
            this.updateView();
            $("#vedio").css("left", -n * this.LIWIDTH);
            $("#imgs").animate({ left: "0" }, this.DURATION, this.autoMove.bind(this, 1));
        } else {
            $("#vedio").animate({ left: -n * this.LIWIDTH }, this.DURATION, this.endMove.bind(this, n));
        }
    },
    endMove: function (n) {//左移结束
        arrs = arrs.concat(arrs.splice(0, n));
        this.updateView();
        $("#vedio").css("left", 0);
        this.autoMove();
    },
    updateView: function () {//将数组中的元素更新到页面
        for (var i = 0, html = '', idxs = ''; i < arrs.length; i++) {
            html += "<li><img style='cursor:pointer' src='" + arrs[i].img + "' onclick='openDetial(\"视频展示\",\"" + arrs[i].Id + "\");'>";
            idxs += "<span style='cursor:pointer;width:10px;height:10px;'  onclick='changevidioImg(this,\"" + arrs[i].i + "\");'></span>";
        }
        $(".play>ul").html(html)
            .css("width", this.LIWIDTH * arrs.length);
        $(".lines").html(idxs);

        if (arrs.length > 0) {
            $(".lines>span:eq(" + arrs[0].i + ")").addClass("active")
                .siblings(".active")
                .removeClass("active");
        }
        //$(".lines span").click(function () {
        //    alert(".lines span");
        //    $(this).addClass("active").siblings(".active").removeClass("active");
        //});
    }
}
vSlider.init();
/****切换******/
$('.box p').on('click', 'span:eq(1)', function () {
    $(this).addClass('active').siblings('.active').removeClass('active');
    $('.phone').addClass('in');
    $('.play').addClass('out');
});
$('.box p').on('click', 'span:eq(0)', function () {
    $(this).addClass('active').siblings('.active').removeClass('active');
    $('.phone').removeClass('in');
    $('.play').removeClass('out');
})